<template>
  <div id="topic">
    <div class="comment">
        <scroller style="top: 0px;"
              ref="commentScroller"
              :on-infinite="infiniteComment">
        <masker style="border-radius: 2px;margin:0px 1px">
        <div class="m-img" :style="{backgroundImage: 'url('+topic.img+')'}"></div>
        </masker>
        <h3 class="title">
            {{topic.title}}
        </h3>
        <div style="clear:both">
            <img style="width:30px; height:30px; border-radius:50%; overflow:hidden;text-align:center" align="absmiddle" v-if="topic.authImg != null && topic.authImg != ''" src="topic.authImg" />
            <div style="padding:10px 15px;color:rgb(78, 72, 72);font-size:15px" v-html="topic.content">{{topic.content}}</div>
            <span style="float:right;margin-right:5px;color:#CCCCCC;margin:0px 15px;">{{topic.createTime}}</span>
        </div>
        <div style="padding:5px;clear:both">
            <p style="letter-spacing:3px;display:inline;font-size:14px;margin-left:15px;">观点</p>
           <!-- <x-button type="warn" style="background-color: rgb(16, 197, 182);width:120px;height:25px;font-size:8px;display:inline;float:right" @click.native="show5=true" >发表我的看法</x-button>-->
           <div style="margin:0px 15px;" class="div_btn" @click="show5=true">发表我的看法</div>
            <div style="clear:both"></div>
        </div>
        <div style="height:1px;width:100%;background-color:#e3e3e3;margin-top:10px"></div>
        <div>
        <ul>
            <li v-for="item in comments"  style="">
                <div style="padding: 10px 15px;">
                    <div style="width: 30px;height: 30px;float: left;">
                    <img style="width:30px; height:30px; border-radius:50%; overflow:hidden;text-align:center;background-color:white" align="absmiddle" :src="item.commentImg" />
                    </div>
                    <div style="width: 230px;height: 30px;float: left;line-height: 30px;margin-left: 5px;">
                    <span style="margin-left:2px;font-size:12px;color:#6d6d72" class="item-title">{{item.commentByName}}</span>
                    </div>
                    <div style="height: 30px;clear:both;">
                    <p style="padding-left:38px;font-size:14px;padding-top:5px;color:#6d6d72">{{item.commentContent}}</p>
                    <span style="color:#CCCCCC;font-size:14px;float:right;margin: 0px 15px;">{{item.commentTimes}}</span>
                    </div>
                    <div style="clear:both"></div>
                </div>
            </li>
        </ul>
        </div>
        </scroller>
    </div>
    <div v-transfer-dom>
      <confirm v-model="show5"
      ref="confirm5"
      title="我的意见"
      @on-cancel="onCancel"
      @on-confirm="onConfirm5"
      @on-show="onShow5"
      @on-hide="onHide">
      <div style="margin-top: 5px;">
        <textarea v-model="content" id='txt1' style ="padding: 5px;
          height: 80px;
          width: 90%;
          margin: 0 auto;"/>
      </div>
      </confirm>
    </div>
    </div>
</template>

<script>
import { XButton, XTextarea, Group, Toast, Masker, Confirm, TransferDom } from 'vux'
import { getCustomerId, commentModule } from '../utils/utils'
import { getAuthInfo } from '../utils/common'
import { getShareParamsInit } from '../utils/wxJsSdkUtils'

export default {
  components: {
    XButton,
    XTextarea,
    Group,
    Toast,
    Masker,
    Confirm
  },
  directives: {
    TransferDom
  },
  data () {
    return {
      topicId: 0,
      noData: '',
      currentPage: '0',
      comments: [],
      items: [],
      submit001: '发布',
      disable001: false,
      content: '',
      position: 'default',
      showPositionValue: false,
      commentShow: false,
      show5: false,
      topic: {
        title: null,
        content: null,
        discription: null,
        img: null,
        name: null,
        authImg: null
      },
      customerId: getCustomerId()
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
    getAuthInfo('home/topic')
  },
  mounted () {
    console.log('mounted')
    console.log(this.$router.currentRoute.query.id)
    let id = this.$router.currentRoute.query.id
    this.topicId = id.toString()
    let path = this.$router.history.current.path
    if (path === '/home/topic') {
      console.log('路径是一个/home/topic')
    }
    console.log(this.$router.currentRoute.query.customerId)
    let customerIdV = this.$router.currentRoute.query.customerId
    if (customerIdV !== undefined) {
      this.customerId = customerIdV
      window.localStorage.setItem('customerId', this.customerId)
      console.log(window.localStorage.getItem('customerId'))
    }

    console.log('this.customerId')
    console.log(this.customerId)

    getShareParamsInit(path, this.customerId, this.topicId, '棱镜社-忠于未知，活出理想', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510586585372&di=4475bbebad8646dde24b6ebf24c8db3e&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201209%2F25%2F20120925232033_HSZCS.jpeg', '做一个有态度、有观点的人')

    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'id': this.topicId,
        'customerId': this.customerId
      },
      responseType: 'json',
      method: 'post',
      currentPage: '0'
    }
    var self = this
    this.$ajax('api/cms/home/topics/info', config).then(function (response) {
      console.log(response)
      console.log(response.data.code)
      console.log(response.data.data)
      self.topic = response.data.data
      console.log(self.topic.authImg)
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    onCancel () {
      this.content = ''
      console.log('on cancel')
    },
    onHide () {
      this.content = ''
      console.log('on hide')
    },
    onShow () {
      this.content = ''
      console.log('on show')
    },
    onShow5 () {
      this.$refs.confirm5.setInputValue('default')
    },
    onConfirm5 () {
      console.log(document.getElementById('txt1').value)
      var txt = this.content
      var self = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'commentType': '1',
          'commentContent': txt,
          'commentTargetId': self.topicId,
          'commentModuleNo': commentModule.home_topic,
          'customerId': this.customerId,
          'commentBy': this.customerId
        },
        responseType: 'json',
        method: 'post',
        currentPage: '0'
      }
      this.$ajax('api/cms/comments/add', config).then(function (response) {
        console.log(response)
        console.log(response.data.data)
        if (response.data.code === '00') {
          self.commentShow = false
          self.comments.unshift(response.data.data)
          self.content = ''
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    refreshComment: function (done) {
      console.log('下拉刷新评论数据')
      console.log('refreshComment')
      var self = this
      this.noData = true
      setTimeout(() => {
        self.points = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': self.currentPage,
            'pageSize': '10',
            'commentBy': this.customerId,
            'customerId': this.customerId,
            'commentModuleNo': commentModule.home_topic
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/comments/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.length)
          console.log(response.data.pagination.currentPage)
          self.currentPage = response.data.pagination.currentPage + 1
          self.comments = response.data.data
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteComment: function (done) {
      console.log('上拉加载评论数据')
      console.log('infiniteComment')
      var self = this
      if (this.noData) {
        console.log(this.noData)
        this.noData = false
        self.$refs.commentScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': self.currentPage,
            'pageSize': '10',
            'id': self.topicId,
            'commentBy': this.customerId,
            'customerId': this.customerId,
            'commentModuleNo': commentModule.home_topic
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/comments/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noData = '没有更多数据'
            self.$refs.commentScroller.finishInfinite(true)
            return
          }
          var data = response.data.data
          var start = data.length
          for (var i = 0; i < start; i++) {
            self.comments.push(data[i])
          }
          self.bottom = self.bottom + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    showPosition: function (position) {
      this.position = position
      this.showPositionValue = true
    },
    processButton001 () {
      this.submit001 = 'processing'
      this.disable001 = true
      var txt = this.content
      var self = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'commentBy': this.customerId,
          'content': txt,
          'targetId': self.topicId,
          'customerId': this.customerId
        },
        responseType: 'json',
        method: 'post',
        currentPage: '0'
      }
      this.$ajax('api/cms/home/topics/addComment', config).then(function (response) {
        console.log(response)
        console.log(response.data.data)
        console.log(response.data.data.comment)
        if (response.data.code === '00') {
          self.commentShow = false
          self.comments.unshift(response.data.data.comment)
          this.submit001 = '发布'
          this.disable001 = false
        } else {
          self.showPosition('top')
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    issueOption () {
      this.commentShow = true
    }
  }
}
</script>

<style scoped>
.weui-dialog__btn_primary{
  color:red !important;
}
.m-img {
    width:100%;
    height:150px;
    background-color:white;
}
.title {
    font-size:24px;
    padding:5px;
    letter-spacing:3px;
    text-align:center;
    color: #3a3d3e;
}
li {
    list-style-type:none;
}
.comment {
    margin-top:10px;
}
.issue_comment {
  position: absolute;
  width:97.5%;
  bottom: 2px;
  background:#efebeb;
  padding: 5px;
}
.comment_btn {
  background-color:#eeeeee !important;
  height:30px;
  width:80px;
  color:#000;
  font-size:8px;
  letter-spacing:5px;
  margin-top:5px;
  float:right;
}
.div_btn {
  background-color: rgb(16, 197, 182);
  width:120px;
  height:25px;
  font-size:10px;
  display:inline;
  float:right;
  border-radius:5px;
  text-align:center;
  line-height: 25px;
  color:white;
  letter-spacing:4px;
}
</style>
